<template>
  <div class="info-txt-header-root">
    <div class="txt-container">
      <div class="title-txt">
        {{ title }}
      </div>
      <div class="title-slot" v-if="$slots.title">
        <slot name="title"></slot>
      </div>
    </div>
    <div class="handel-container" v-if="$slots.handel">
      <slot name="handel"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";

.info-txt-header-root {
  height: 50px;
  width: 100%;
  padding-bottom: 5px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(220, 223, 230, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .txt-container, .handel-container {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .txt-container {
    justify-content: flex-start;

    .title-txt {
      font-size: $second-font-size;
      font-weight: 500;
      letter-spacing: $second-letter-spacing;
      color: rgba(48, 49, 51, 1);
    }

    .title-slot {
      display: flex;
      justify-content: flex-start;
      margin-left: 10px;
    }
  }

  .handel-container {
    justify-content: flex-end;
  }
}
</style>
